<div class="content">
    <div id="example_title">
        <h1>Show/Hide Fields</h1>
        There is an easy way to show/hide specified fields.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="form" style="width: 750px;"></div>
<br>
<button class="w2ui-btn" onclick="hide()">Hide</button>
<button class="w2ui-btn" onclick="show()">Show</button>
<br>

<!--CODE-->
<script type="module">
import { w2form, w2ui, w2popup, w2alert } from '__W2UI_PATH__'

let form = new w2form({
    box: '#form',
    name: 'form',
    header: 'Auto-Generated Form',
    url: 'server/post',
    fields: [
        { field: 'first_name', type: 'text', required: true,
            html: { label: 'First Name', attr: 'style="width: 200px"' }
        },
        { field: 'last_name',  type: 'text', required: true,
            html: { label: 'Last Name', attr: 'style="width: 200px"' }
        },
        { field: 'comments', type: 'textarea',
            html: { label: 'Comments', attr: 'style="width: 200px; height: 60px"' }
        },
        { field: 'city', type: 'text',
            html: { label: 'City', attr: 'style="width: 200px"', column: 2, }
        },
        { field: 'zip', type: 'text', disabled: true,
            html: { label: 'Zip Code', attr: 'style="width: 100px"', column: 2, }
        },
        { field: 'street', type: 'text',
            html: { label: 'Street', attr: 'style="width: 200px"', column: 2, }
        },
    ],
    actions: {
        Reset(event) {
            this.clear()
        },
        Save(event) {
            if (w2ui.form.validate().length == 0) {
                w2popup.open({
                    title: 'Form Data',
                    with: 600,
                    height: 550,
                    body: `<pre>${JSON.stringify(this.getCleanRecord(), null, 4)}</pre>`,
                    actions: { Ok: w2popup.close }
                })
            }
        }
    }
})

window.hide = function() {
    console.log(w2ui.form.hide('zip', 'street', 'first_name', 'bad_field'))
}
window.show = function() {
    console.log(w2ui.form.show('zip', 'street', 'first_name', 'bad_field'))
}
</script>
